/**
 * AI字帖应用主题变量
 * Theme Variables for AI Calligraphy App
 * 
 * 设计理念：墨韵青花 - 融合中国传统书法美学与现代科技
 * Design Concept: Ink & Blue Porcelain - Blending traditional Chinese calligraphy with modern technology
 */

:root {
  // 主色调 - 墨青系列 (Primary Colors - Ink Blue Series)
  --primary-dark: #2E5266;     // 主品牌色 - 墨青 (Primary Brand Color - Ink Blue)
  --primary-light: #4A90A4;    // 辅助色 - 青花蓝 (Secondary Color - Blue Porcelain)
  --primary-accent: #C8102E;   // 强调色 - 中国红 (Accent Color - Chinese Red)
  
  // 基础色 - 水墨系列 (Base Colors - Ink Series)
  --ink-black: #1a1a1a;        // 浓墨 (Dark Ink)
  --ink-gray: #4a4a4a;         // 淡墨 (Light Ink)
  --paper-white: #fdfbf7;      // 宣纸白 (Rice Paper White)
  --paper-beige: #f5f1e8;      // 古纸色 (Aged Paper)
  
  // 辅助色 - 传统色彩 (Auxiliary Colors - Traditional Colors)
  --jade-green: #27ae60;       // 翡翠绿 (Jade Green)
  --bamboo-green: #6ab04c;     // 竹青 (Bamboo Green)
  --imperial-yellow: #f39c12;  // 皇室黄 (Imperial Yellow)
  --bronze: #8b4513;           // 青铜色 (Bronze)
  
  // 渐变与阴影 (Gradients & Shadows)
  --shadow-ink: rgba(46, 82, 102, 0.15);           // 墨色阴影
  --shadow-soft: rgba(0, 0, 0, 0.08);              // 柔和阴影
  --gradient-paper: linear-gradient(135deg, #fdfbf7 0%, #f5f1e8 100%);        // 纸张渐变
  --gradient-primary: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);  // 主色渐变
  --gradient-accent: linear-gradient(135deg, var(--primary-accent) 0%, #a50e28 100%);              // 强调色渐变
}

// SCSS变量映射 (SCSS Variable Mapping)
// 为了兼容性，同时提供SCSS变量版本

// 主色调 (Primary Colors)
$primary-dark: #2E5266;
$primary-light: #4A90A4;
$primary-accent: #C8102E;

// 基础色 (Base Colors)  
$ink-black: #1a1a1a;
$ink-gray: #4a4a4a;
$paper-white: #fdfbf7;
$paper-beige: #f5f1e8;

// 辅助色 (Auxiliary Colors)
$jade-green: #27ae60;
$bamboo-green: #6ab04c;
$imperial-yellow: #f39c12;
$bronze: #8b4513;

// 渐变色 (Gradients)
$shadow-ink: rgba(46, 82, 102, 0.15);
$shadow-soft: rgba(0, 0, 0, 0.08);

/**
 * 使用说明 (Usage Guidelines)
 * 
 * CSS变量使用 (CSS Variables):
 * background: var(--primary-dark);
 * color: var(--paper-white);
 * 
 * SCSS变量使用 (SCSS Variables):
 * background: $primary-dark;
 * color: $paper-white;
 * 
 * 设计原则 (Design Principles):
 * - 主品牌色用于导航栏、主要按钮、强调文本
 * - 辅助色用于焦点状态、装饰元素
 * - 强调色用于印章装饰、错误提示
 * - 基础色用于文本、背景、边框
 */